web/pages/article/[id].vue

<template>
  <!-- Banner -->
  <Banner :layout="layout" />

  <div class="container flex flex-col w-full md:w-screen-xl m-auto my-3">

    <Breadcrumb :data="form" />

    <!-- 左右结构 -->
    <div class="news-box sm:mt-0 mt-2 flex sm:flex-row flex-col justify-between sm:space-x-4">
      <div class="left sm:w-18/24">
        <!-- 文章列表 -->
        <div class="news-list">
          <ul class="infinite-list px-3" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
            <li v-for="item in list">
              <div class="item flex justify-between py-3 px-4 gap-xl mb-5 rounded-lg mb-3 bg-white hover:shadow">
                <div class="item-info py-2 flex flex-col justify-between">
                  <div class="title line-clamp-2 overflow-hidden text-ellipsis group-hover:group-hover:text-ellipsis">
                    <a :href="`/article/detail/${item.articleId}`" target="_blank" class="text-xl">{{ item.title }}</a>
                  </div>
                  <div class="desc max-w-22/24 text-gray-5 sm:block hidden" v-html="item.comments"></div>
                  <div class="actions text-gray-4 text-sm flex gap-2xl">
                    <span href="#">{{ item.updateTime }}</span>
                    <span href="#">浏览：{{ item.actualViews }}</span>
                  </div>
                </div>
                <div class="item-image flex items-center" @click="navigateTo(`/article/detail/${item.articleId}`)">
                  <el-image :src="item.image" lazy class="sm:w-[140px] sm:h-[140px] w-[110px] h-[110px] bg-gray-50 cursor-pointer transition rounded-lg sm:rounded-lg ease-in-out delay-150  hover:-translate-y-1 hover:scale-110 duration-300" fit="contain" />
                </div>
              </div>
            </li>
          </ul>
          <div class="text-center text-gray-4">
            <text v-if="disabled">没有更多了</text>
            <text @click="load" v-else>加载更多</text>
          </div>
        </div>
      </div>
      <div class="right sm:mt-0 mt-4 sm:w-6/24">
        <!-- 推荐文章 -->
        <div class="category-item bg-white rounded-lg p-3 hover:shadow">
          <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2">
            <el-icon>
              <ElIconLink/>
            </el-icon>
            <text class="ml-2">推荐文章</text>
          </div>
          <div class="flex flex-wrap px-2 py-4">
            <div v-for="(item,index) in links" class="flex items-center">
              <a :href="item.url" target="_blank">{{ item.name }}</a>
              <el-divider v-if="index + 1 != links.length" direction="vertical" />
            </div>
          </div>
        </div>

        <div class="category-item mt-4 bg-white rounded-lg p-3 hover:shadow">
          <div class="category-name text-lg text-gray-600 border-b border-gray-200 border-b-solid pb-2 mx-2">
            <el-icon>
              <ElIconLink/>
            </el-icon>
            <text class="ml-2">点击排行</text>
          </div>
          <div class="flex flex-wrap px-2 py-4">
            <div v-for="(item,index) in links" class="flex items-center">
              <a :href="item.url" target="_blank">{{ item.name }}</a>
              <el-divider v-if="index + 1 != links.length" direction="vertical" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<!--  <el-divider />-->
<!--  <div v-if="!list">-->
<!--    <el-empty description="404 页面不存在"></el-empty>-->
<!--  </div>-->
</template>
<script setup lang="ts">
import type {ApiResult, PageResult} from "~/api";
import type {Article} from "~/api/cms/article/model";
import {useServerRequest} from "~/composables/useServerRequest";
import Breadcrumb from "~/components/Breadcrumb.vue";
import {useForm, useWebsite} from "~/composables/configState";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdByParam, getIdBySpm, getPath} from "~/utils/common";

const route = useRoute();

// 页面信息
const list = ref<Article[]>([]);
const title = ref();
const categoryName = ref();
const count = ref()
const links = ref<any[]>();
const page = ref<number>(0);
const disabled = ref<boolean>(false);
const newList = ref<Article[]>();
const layout = ref<any>();

// 获取状态
const form = ref<Navigation>();
const website = useWebsite();

const load = () => {
  if(!disabled.value){
    page.value++;
    // reload();
  }
}

// 请求数据
const reload = async () => {

  const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-navigation/getNavigationByPath',{query: {path: getPath()}})
  if(nav.value?.data){
    form.value = nav.value?.data;
  }
  // 页面布局
  if(form.value?.layout){
    layout.value = JSON.parse(form.value?.layout)
  }
  console.log(layout.value)

  // 获取文章分页
  const { data: articleList } = await useServerRequest<ApiResult<PageResult<Article>>>('/cms/cms-article/page',{
    params: {
      page: page.value,
      categoryId: getIdByParam()
    }
  })

  if(articleList.value?.data){
    list.value = articleList.value.data.list
  }
  console.log(list.value)

  useHead({
    title: `${form.value.title} - ${website.value.websiteName}`,
    meta: [{ name: form.value.design?.keywords, content: form.value.design?.description }],
    bodyAttrs: {
      class: "page-container",
    },
    script: [
      {
        children: "console.log('Hello World')",
      },
    ],
  });
}


watch(
    () => route,
    () => {
      reload();
    },
    { immediate: true }
);

</script>